<template>
  <view class="order-details">
    <!-- 顶部导航栏 -->
 <view class="nav-bar">
      <view class="nav-background"></view>

      <view class="nav-content">
        <view class="nav-left" @click="navigateBack">
          <uni-icons type="left" size="22" color="#fff" />
        </view>
        <view class="nav-title">
          <text class="title-text">订单详情</text>
        </view>
        <view class="nav-right">
          <view class="nav-icon-wrapper" @click="handleMore">
            <uni-icons type="more" size="20" color="#fff" />
          </view>
          <view class="nav-icon-wrapper" @click="handleShare">
            <uni-icons type="redo" size="20" color="#fff" />
          </view>
        </view>
      </view>
    </view>
   


    <!-- 主要内容区域 -->
    <view class="content-container">
      <!-- 核销码区域 -->
      <view class="verification-section">
        <view class="verification-code">
          <text class="code-text">核销码:{{ orderData.verificationCode }}</text>
        </view>
        <text class="vehicle-text">车辆:{{ orderData.vehicleInfo }}</text>
      </view>

      <!-- 服务内容区域 -->
      <view class="service-section">
        <text class="section-title">服务内容</text>
        <view class="service-item">
          <text class="service-name">{{ orderData.services[0].name }}</text>
          <text class="service-price">¥{{ orderData.services[0].price }}</text>
        </view>
        <view class="service-item">
          <text class="service-name">{{ orderData.services[1].name }}</text>
          <text class="service-price">¥{{ orderData.services[1].price }}</text>
        </view>
      </view>

      <!-- 订单信息区域 -->
      <view class="order-info-section">
        <text class="section-title">订单信息</text>
        <view class="info-item">
          <text class="info-label">原价</text>
          <text class="info-value">¥{{ orderData.originalPrice }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">优惠</text>
          <text class="info-value">¥{{ orderData.discount }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">实付金额</text>
          <text class="info-value">¥{{ orderData.totalPrice }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">订单编号</text>
          <text class="info-value">{{ orderData.orderNumber }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">预约时间</text>
          <text class="info-value">{{ orderData.appointmentTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">支付时间</text>
          <text class="info-value">{{ orderData.paymentTime }}</text>
        </view>
        <view class="info-item">
          <text class="info-label">核销时间</text>
          <text class="info-value">{{ orderData.verificationTime || '' }}</text>
        </view>
      </view>

    </view>

    <!-- 确认核销按钮区域 -->
    <view class="confirm-section">
      <button 
        class="confirm-btn" 
        :class="{ 'btn-disabled': orderData.isVerified }"
        @click="showVerificationConfirm"
        :disabled="orderData.isVerified"
      >
        <text class="btn-text">{{ orderData.isVerified ? '已核销' : '确认核销' }}</text>
      </button>
    </view>

    <!-- 核销确认弹窗 -->
    <view v-if="showConfirmPopup" class="popup-overlay" @click="hideVerificationConfirm">
      <view class="popup-container" @click.stop>
        <view class="popup-title">核销此订单</view>
        <view class="popup-message">
          <text class="message-line">请您仔细核对订单,此操作不可撤销</text>
          <text class="message-line">请谨慎操作!</text>
        </view>
        <view class="popup-buttons">
          <button class="popup-btn cancel-btn" @click="hideVerificationConfirm">取消</button>
          <button class="popup-btn confirm-btn" @click="confirmVerification">确认</button>
        </view>
      </view>
    </view>

    <!-- 核销成功弹窗 -->
    <view v-if="showSuccessPopup" class="popup-overlay" @click="hideSuccessPopup">
      <view class="success-popup-container" @click.stop>
        <view class="success-icon">
          <view class="checkmark-icon">✓</view>
        </view>
        <text class="success-text">核销成功</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showConfirmPopup: false,
      showSuccessPopup: false,
      orderData: {
        verificationCode: 'MC1234-5678-9012',
        vehicleInfo: '奔驰FWE4/豫A98FHJ',
        services: [
          { name: '车辆精洗', price: '100' },
          { name: '车辆精洗附加费', price: '10' }
        ],
        originalPrice: '110',
        discount: '20',
        totalPrice: '90.00',
        orderNumber: '1223233445',
        appointmentTime: '2023-03-18 19:00:00',
        paymentTime: '2023-03-18 19:14:28',
        verificationTime: '',
        isVerified: false
      }
    };
  },
  onLoad(options) {
    // 接收从订单列表传递的参数
    if (options.orderNumber) {
      this.loadOrderDetails(options.orderNumber);
    }
  },
  methods: {
    loadOrderDetails(orderNumber) {
      // 根据订单号加载订单详情
      console.log('加载订单详情:', orderNumber);
    },
    showVerificationConfirm() {
      if (this.orderData.isVerified) return;
      this.showConfirmPopup = true;
    },
    hideVerificationConfirm() {
      this.showConfirmPopup = false;
    },
    confirmVerification() {
      if (this.orderData.isVerified) return;
      
      // 隐藏确认弹窗
      this.showConfirmPopup = false;
      
      // 更新订单状态
      this.orderData.isVerified = true;
      this.orderData.verificationTime = new Date().toLocaleString();
      
      // 显示成功弹窗
      this.showSuccessPopup = true;
      
      // 3秒后自动隐藏成功弹窗
      setTimeout(() => {
        this.showSuccessPopup = false;
      }, 3000);
    },
    hideSuccessPopup() {
      this.showSuccessPopup = false;
    }
  }
};
</script>

<style scoped>
.order-details {
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* 导航栏样式 */
.nav-bar {
  position: relative;
  z-index: 1;
  height: 70px;
  padding-top: 30px;
  overflow: hidden;
}

.nav-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1F73F1;
}

/* 内容容器 */
.content-container {
  background: #fff;
  margin: 0 16px;
  border-radius: 12px 12px 0 0;
  margin-top: -20px;
  position: relative;
  z-index: 10;
  padding: 32px 20px 8px 20px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

/* 区域通用样式 */
.verification-section,
.service-section,
.order-info-section {
  margin-bottom: 20px;
}

.order-info-section {
  margin-bottom: 0;
}

/* 确认按钮区域 */
.confirm-section {
  background: #f5f5f5;
  padding: 16px 16px;
  margin: 0 16px;
  border-radius: 0 0 12px 12px;
  position: relative;
  z-index: 10;
}

/* 区域标题 */
.section-title {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 12px;
  display: block;
  letter-spacing: 0.5px;
}

/* 核销码区域 */
.verification-code {
  margin-bottom: 12px;
}

.code-text {
  font-size: 20px;
  font-weight: 700;
  color: #333;
  letter-spacing: 0.5px;
}

.vehicle-text {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

/* 服务内容区域 */
.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.service-item:last-child {
  margin-bottom: 0;
}

.service-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.service-price {
  font-size: 16px;
  color: #3388FF;
  font-weight: 500;
}

/* 订单信息区域 */
.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.info-value {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

/* 确认按钮样式 */
.confirm-btn {
  width: 100%;
  background: linear-gradient(135deg, #3388FF 0%, #1976D2 100%);
  color: #fff;
  padding: 16px 20px;
  border-radius: 12px;
  border: none;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);
  transition: all 0.3s ease;
}

.confirm-btn:active {
  transform: scale(0.98);
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.4);
}

.btn-disabled {
  background: #ccc;
  box-shadow: none;
}

.btn-disabled:active {
  transform: none;
}

.btn-text {
  font-size: 18px;
  font-weight: 700;
}

/* 响应式设计 */
@media (max-width: 750px) {
  .content-container {
    margin: 0 12px;
    margin-top: -90px;
    padding: 28px 16px 8px 16px;
  }
  
  .confirm-section {
    margin: 0 12px;
    padding: 12px 12px;
  }
  
  .section-title {
    font-size: 18px;
  }
  
  .code-text {
    font-size: 18px;
  }
  
  .service-name,
  .service-price,
  .info-label,
  .info-value {
    font-size: 15px;
  }
  
  .confirm-btn {
    padding: 14px 16px;
    font-size: 16px;
  }
}

/* 弹窗样式 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.popup-container {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: popupSlideIn 0.3s ease-out;
}

.popup-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 16px;
}

.popup-message {
  text-align: center;
  margin-bottom: 24px;
}

.message-line {
  display: block;
  font-size: 14px;
  color: #666;
  line-height: 1.5;
  margin-bottom: 4px;
}

.popup-buttons {
  display: flex;
  gap: 12px;
}

.popup-btn {
  flex: 1;
  padding: 12px 16px;
  border-radius: 8px;
  border: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.cancel-btn {
  background: #f5f5f5;
  color: #666;
}

.cancel-btn:active {
  background: #e0e0e0;
}

.popup-btn.confirm-btn {
  background: #1F73F1;
  color: #fff;
}

.popup-btn.confirm-btn:active {
  background: #1a66d9;
}

/* 成功弹窗样式 */
.success-popup-container {
  background: #fff;
  border-radius: 12px;
  padding: 32px 24px;
  width: 100%;
  max-width: 280px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  text-align: center;
  animation: popupSlideIn 0.3s ease-out;
}

.success-icon {
  width: 80px;
  height: 80px;
  background: #333;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.checkmark-icon {
  color: #fff;
  font-size: 40px;
  font-weight: bold;
}

.success-text {
  font-size: 18px;
  color: #333;
  font-weight: 500;
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
</style>